@W-18669892 - Add Inventory Filter to PLP by shauryemahajanSF · Pull Request #2546 · SalesforceCommerceCloud/pwa-kit

shauryemahajanSF · 2025-06-10T16:52:47Z

Description

This PR adds a Shop by Availability filter on the PLP that allows shoppers to view products based on their selected store. Additionally, no results page still shows filters so that they can be unchecked so a user can return back to the previous state easily.

PLP.Inventory.Filter.mp4

Notes:

A universal selectedStoreContext/ useSelectedStore hook will be added in a future PR which will coordinate store locators called from any place. Right now page re-renders will only happen from store locator called from PLP.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

Shown in video above

How to Test-Drive This PR

(step1)

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

cc-prodsec · 2025-06-10T17:31:57Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

Signed-off-by: shauryemahajanSF <143645277+shauryemahajanSF@users.noreply.github.com>

shauryemahajanSF · 2025-06-10T17:43:27Z

packages/template-retail-react-app/app/pages/product-list/index.jsx

@@ -426,225 +427,240 @@ const ProductList = (props) => {
                    return <meta name={id} content={value} key={id} />
                })}
            </Helmet>


The only changes in this file is adding inventory filter and moving showNoResults check down to the product grid so that filters can still be set/unset when no products show up. The other code is unchanged, just un-indented.

packages/template-retail-react-app/translations/en-US.json

patricksullivansf

Awesome

patricksullivansf · 2025-06-10T21:06:06Z

packages/template-retail-react-app/translations/en-US.json

  },
  "empty_search_results.info.cant_find_anything_for_category": {
-    "defaultMessage": "We couldn’t find anything for {category}. Try searching for a product or {link}."
+    "defaultMessage": "We couldn't find anything for {category}. Try searching for a product or {link}."


agree the acute accent is weird here, but why fix it as part of this PR?

oops accident

patricksullivansf · 2025-06-10T21:08:40Z

packages/template-retail-react-app/app/utils/store-locator-utils.js

+
+    try {
+        const storeInfoKey = `store_${siteId}`
+        const storeInfo = JSON.parse(window.localStorage.getItem(storeInfoKey) || 'null')


aside: the reliance on localStorage as the source of truth for our initial PRs troubles me when the end solution was moving the state provider up the DOM. hopefully this at least encapsulates it somewhat...

Yup see what you're saying, luckily its just defined here - I'll start on store location provider right after this so shouldn't be too bad.

snilakandan13 · 2025-06-11T18:16:49Z

packages/template-retail-react-app/app/pages/product-list/partials/inventory-filter.jsx

+
+    const isChecked = selectedFilters?.ilids !== undefined
+
+    useEffect(() => {


I believe this is the common piece, which we will handle in refactor story

aditek-sf · 2025-06-11T18:21:50Z

@shauryemahajanSF just curious on adding the skip changelog label for this change, do we need to make a note of this in the changelog file?

aditek-sf · 2025-06-11T19:48:18Z

packages/template-retail-react-app/app/pages/product-list/partials/inventory-filter.test.js

+}))
+
+jest.mock('@salesforce/retail-react-app/app/components/store-locator-modal', () => {
+    // eslint-disable-next-line react/prop-types


Why was there a need to disable the linting check?

Without this we get linting errors around prop validation, but we don't need to define props here since its just a unit test

shauryemahajanSF · 2025-06-11T20:00:59Z

@shauryemahajanSF just curious on adding the skip changelog label for this change, do we need to make a note of this in the changelog file?

Was thinking we can just have a concise changelog when we merge into develop

snilakandan13 · 2025-06-11T20:23:18Z

packages/template-retail-react-app/app/pages/product-list/partials/inventory-filter.jsx

+            setSelectedStore(storeInfo)
+
+            // Apply the filter when a store is selected from the locator
+            toggleFilter({value: storeInfo.inventoryId}, 'ilids', false, false)


Should we have a future WI, where we dont add the ilids refinement in the URL params?

Good idea, added the WI here: https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE00002G0eEcYAJ/view

snilakandan13 · 2025-06-11T20:48:47Z

@shauryemahajanSF - dont you need a changelog.md file

snilakandan13

looks good, the ilids in a future PR will no longer be added to URL parameter

aditek-sf

LGTM

shauryemahajanSF added 8 commits June 5, 2025 12:09

add filter to UI

96a3994

shop by availability filter opens store locator modal

9ff7e03

fix selected refinmenets and no search results page

b66584f

revert styling changes to PLP

de6d3f3

added globalization and aria labels

da1603a

add helper function

9ca9ed7

add unit tests

5fe6ca1

comments

dd6e286

shauryemahajanSF added the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Jun 10, 2025

Merge branch 'feature/shop-in-store' into sm/addStoreFilterOnPLP

ecdee88

Signed-off-by: shauryemahajanSF <143645277+shauryemahajanSF@users.noreply.github.com>

shauryemahajanSF commented Jun 10, 2025

View reviewed changes

shauryemahajanSF marked this pull request as ready for review June 10, 2025 17:44

shauryemahajanSF requested a review from a team as a code owner June 10, 2025 17:44

linting

b9d368f

shauryemahajanSF requested review from aditek-sf, patricksullivansf, sf-henry-semaganda, snilakandan13, wei-liu-sf, yhsieh1 and yunakim714 June 10, 2025 20:03

alexey-morozov-salesforce reviewed Jun 10, 2025

View reviewed changes

packages/template-retail-react-app/translations/en-US.json Outdated Show resolved Hide resolved

alexey-morozov-salesforce reviewed Jun 10, 2025

View reviewed changes

packages/template-retail-react-app/translations/en-US.json Outdated Show resolved Hide resolved

Fix capatilzations

d2896bf

patricksullivansf reviewed Jun 10, 2025

View reviewed changes

shauryemahajanSF added 2 commits June 10, 2025 17:30

translations

1e727ea

fix translation

a5e34fa

shauryemahajanSF requested a review from patricksullivansf June 11, 2025 16:50

snilakandan13 reviewed Jun 11, 2025

View reviewed changes

aditek-sf reviewed Jun 11, 2025

View reviewed changes

snilakandan13 reviewed Jun 11, 2025

View reviewed changes

snilakandan13 approved these changes Jun 11, 2025

View reviewed changes

aditek-sf approved these changes Jun 12, 2025

View reviewed changes

shauryemahajanSF merged commit 61aa60d into feature/shop-in-store Jun 12, 2025
35 checks passed

patricksullivansf mentioned this pull request Jun 25, 2025

@W-18811979 BOPIS (buy online pick up in store) #2646

Merged

12 tasks


		const isChecked = selectedFilters?.ilids !== undefined

		useEffect(() => {

Conversation

shauryemahajanSF commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Snyk checks have passed. No issues have been found so far.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

patricksullivansf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aditek-sf commented Jun 11, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shauryemahajanSF Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shauryemahajanSF commented Jun 11, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snilakandan13 commented Jun 11, 2025

Uh oh!

snilakandan13 left a comment

Choose a reason for hiding this comment

Uh oh!

aditek-sf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

shauryemahajanSF commented Jun 10, 2025 •

edited

Loading

cc-prodsec commented Jun 10, 2025 •

edited

Loading

shauryemahajanSF Jun 11, 2025 •

edited

Loading